<template>
    <div class="block">
        <el-row class="block-item">
            <stockSelComp label="股票搜索" size="mini" v-model="code" ref="stockSel"></stockSelComp>
            <el-button type="primary" @click="query" size="mini" style="height:28px;">查询</el-button>
            <el-button type="primary" @click="addCompare" size="mini" style="height:28px;">添加比对</el-button>
        </el-row>
        <el-row class="block-item">
            <template v-if="code">
                <timeLine :code="code"></timeLine>
                <!-- <kLine :code="code" isGt="2"></kLine> -->
            </template>
        </el-row>
    </div>
</template>



<script>
import Vue from "vue";
import zlib from "zlib";
import stockSelComp from "@/components/stock/stockSelComp"
import timeLine from "./timeLine"
import kLine from "./kLine"



export default {
    components:{
        stockSelComp,
        timeLine,
        kLine
    },
    data() {
        var that = this;
        return {
            isLoad: false,
            code: "btcusdt",
            type : "cy",
            typeList:[{"name":"创业",value:"cy"},{"name":"深证",value:"sz"},{"name":"上证",value:"sh"}],
            psize : 50,
            newList:[],
            newcfg:{
                usePage:false,
                btns:[
                    {name:"比对",handle:({row})=>{
                        this.addComp(row);
                    }},
                    // {name:"添加记录",handle:({row})=>{
                    //     this.addRecord(row);
                    // }}
                ],
                columns2: [
                    {prop:"f12",label:"代码",width:80,sortable:true},
                    // {prop:"f14",label:"名称",width:100,sortable:true},
                    {prop:"f2",label:"最新",width:80,sortable:true,align:"right",getColor(s){return that.getRateColor(s.row.f3)}},
                    {prop:"f3",label:"涨跌幅",width:80,sortable:true,align:"right",getColor(s){return that.getRateColor(s.row.f3)},endStr:"%"},
                    {prop:"f4",label:"涨跌额",width:80,sortable:true,align:"right",getColor(s){return that.getRateColor(s.row.f3)}},
                    {prop:"f18",label:"昨收",width:80,sortable:true,align:"right"},
                    {prop:"f17",label:"今开",width:80,sortable:true,align:"right",getColor(s){return that.getColor(s.row.f17,s.row.f18)}},
                    {prop:"f15",label:"最高",width:80,sortable:true,align:"right",getColor(s){return that.getColor(s.row.f15,s.row.f18)}},
                    {prop:"f16",label:"最低",width:80,sortable:true,align:"right",getColor(s){return that.getColor(s.row.f16,s.row.f18)}},
                    {prop:"f7",label:"振幅",width:80,sortable:true,align:"right"},
                    {prop:"f8",label:"换手",width:80,sortable:true,align:"right",endStr:"%"},
                    {prop:"f9",label:"市盈率",width:80,sortable:true,align:"right"},
                    {prop:"totalDay",label:"天数",width:80,sortable:true,align:"right"},
                    {prop:"step1",label:"step1",width:80,sortable:true,align:"right",getColor(s){return that.getRateColor(s.row.step1)}},
                    {prop:"step1rise",label:"rise1",width:80,sortable:true,align:"right",endStr:"%",getColor(s){return that.getRateColor(s.row.step1rise)}},
                    {prop:"step2",label:"step2",width:80,sortable:true,align:"right",getColor(s){return that.getRateColor(s.row.step2)}},
                    {prop:"step2rise",label:"rise2",width:80,sortable:true,align:"right",endStr:"%",getColor(s){return that.getRateColor(s.row.step2rise)}},

                ],
            }
        }
    },
    computed:{
        qryType (){
            var fsval = "";
            if(this.type=="sz"){
                fsval = "m:0+t:6,m:0+t:13";
            }else if(this.type=="sh"){
                fsval = "m:1+t:2,m:1+t:23";
            }else{
                fsval = "m:0+t:80";
            }
            return fsval
        }
    },
    provide () {
      return {
      }
    },

    mounted() {
        this.startWs();
    },

    methods: {
        addCompare(){
            var info = this.$refs.stockSel.getPlayerInfo()
            if(!info.code){
                this.$message.error("请先查询股票信息")
                return;
            }
            window.$vue.addCompItem({code:info.code,name:info.name});
        },
        query(){
            if(this.$refs.newTable) this.$refs.newTable.reQuery();
        },
        startWs(){
            var ws = new WebSocket("wss://api.huobi.pro/ws"); 
            //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
            ws.onopen = function(){
                //当WebSocket创建成功时，触发onopen事件
                console.log("open");
                
            }
            ws.onmessage = function(e){
                //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
                const fr = new FileReader();
                fr.onload = function() {
                    zlib.gunzip(
                        new Uint8Array(fr.result),
                        function(err, raw) {
                            if (err) {
                                console.error(err);
                                return;
                            }
                            var data = raw.toString("utf8");
                            console.log(data);
                            var obj = JSON.parse(data);
                            if(obj.ping){
                                ws.send(JSON.stringify({"pong":obj.ping})); 

                                if(!window.orderbtc){
                                    console.log("order btc data");
                                    // ws.send(JSON.stringify({"sub":"market.btcusdt.kline.1min","id":"idbtc"})); 
                                    // ws.send(JSON.stringify({"sub":"market.btcusdt.kline.5min","id":"idbtc"})); 
                                    ws.send(JSON.stringify({"req":"market.btcusdt.kline.5min","id":"idbtc"})); 
                                    window.orderbtc = true;
                                }
                            }
                        }
                    );
                }
                fr.readAsArrayBuffer(e.data);
            }
            ws.onclose = function(e){
                //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
                console.log("close");
            }
            ws.onerror = function(e){
                //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
                console.log(e);
            }
        }
    }
    
}
</script>
